<template>
    <div class="role-form-dialog">
        <el-dialog v-model="roleDialogVisible"
                   :title="opt === 'EDIT' ? '修改' : '添加'"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @close="$emit('update:show', false)"
                   destroy-on-close
                   top="8vh">
            <el-form :model="roleForm"
                     :rules="roleFormRules"
                     ref="roleForm"
                     label-position="right"
                     label-width="150px">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="roleForm.name" autocomplete="off" placeholder="请输入角色名称"/>
                </el-form-item>
                <el-form-item label="角色自定义码" prop="code">
                    <el-input v-model="roleForm.code" autocomplete="off" placeholder="请输入角色编码，建议使用大写字母和下划线"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button type="primary" plain @click="submitResourceForm('roleForm')">提 交</el-button>
                    <el-button v-if="opt === 'ADD'" type="warning" plain
                               @click="resetResourceForm('roleForm')">重 置</el-button>
                    <el-button type="info" plain @click="roleDialogVisible = false">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import roleReq from "@/services/role/request";

export default {
    name: "RoleForm",
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        opt: {
            type: String,
        },
        datas: {
            type: Object,
        },
    },
    watch: {
        show() {
            if (this.show) {
                this.roleForm = this.datas
                this.roleDialogVisible = this.show
            }
        },
    },
    data() {
        return {
            roleDialogVisible: false,
            roleForm: {},
            roleFormRules: {
                name: [{required: true, message: "请输入角色名称", trigger: "blur"}],
                code: [{required: true, message: "请输入角色编码", trigger: "blur"}],
            },
        };
    },
    methods: {
        resetResourceForm(formName) {
            this.$refs[formName].resetFields();
        },
        submitResourceForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 提交后台
                    let r = await roleReq.save(this.roleForm)
                    if (r.code === 0) {
                        this.$message.success("操作成功")
                        this.roleDialogVisible = false
                        // 让父组件刷新列表
                        this.$emit("finishMethod")
                    } else {
                        this.$message.error(r.msg)
                    }
                } else {
                    return false;
                }
            });
        },
    },
}
</script>

<style scoped>

</style>